<template>
  <div class="serach-history">
    <van-cell title="历史记录" >
        <div v-if="isDeleteShow">
            <span @click="$emit('clear-search-historises')">全部删除</span>
            &nbsp;&nbsp;
            <span @click="isDeleteShow = false">完成</span> 
        </div>
        <van-icon v-else name="delete-o" @click="isDeleteShow = true" />
    </van-cell>
    <van-cell 
        v-for="(item,index) in searchHistories" :key="index" 
        :title="item" 
        @click="onSearchItemClick(item, index)"
        >
        <van-icon v-show="isDeleteShow" name="close" />
    </van-cell>
  </div>
</template>

<script>
export default {
    name: 'SearchHistory',
    props: {
        // prop 是受父组件数据影响的
        //   如果是普通数据（数字、字符串、布尔值）绝对不能修改，即便改了也不回传导给父组件
        //   如果是引用类型（数组，对象）
        //      可以修改，例如：[].push() 对象.xxx = xxx
        //      不能重新赋值， xxx = []
        searchHistories: {
            type: Array,
            required:true
        }
    },
    data () {
        return{
            isDeleteShow:false, //控制删除显示状态
        }
    },
    methods: {
        onSearchItemClick (item, index) {
            if (this.isDeleteShow) {
                // 删除状态，删除历史数据
                // this.searchHistories.splice(index, 1)
                this.$emit('delete-searchHistories',index)
            } else {
                // 非删除状态，点击直接进入搜索
                this.$emit('search',item)
            }
        }
    },
    computed:{}
}
</script>

<style scoped lang="less">

</style>